<template>
	<view class="container" v-if="ingredientList.length">
		<text>我的菜谱</text>
		<scroll-view scroll-x="true" class="content">
			<view class="itemBox" >
				<view class="item" v-for="item in ingredientObj" :key='item._id'>
					<navigator class="item" :url="'/pages/detail/detail?_id='+item._id">
						<image :src="item.coverpic"></image>
						<text>{{item.name}}</text>
					</navigator>
				</view>
			</view>
			
		</scroll-view>
	</view>
	<view class="container1" v-else>
		<text>我的菜谱</text>
			<u-empty text="列表为空" mode="list"></u-empty>
	</view>
</template>

<script>
	export default {
		name: "mineImageIngredient",
		data() {
			return {
				ingredientObj: []
			};
		},
		props: ['ingredientList'],
		watch: {
			ingredientList: {
				deep: true,
				immediate:true,
				handler(a, b) {
					if(!a) return
					this.ingredientObj = []
					a.forEach(v => {
						this.$api.search.getMenuDetail({
							_id: v
						}).then(res => {
							// console.log(res.message[0]);
							this.ingredientObj.push(res.message[0])
						})
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container1{
		padding: 16rpx 32rpx;
	}
	.container {
		height: 344rpx;
		padding: 16rpx 32rpx;

		>text {
			font-size: 28rpx;
			margin-bottom: 32rpx;
		}

		.content {

			width: 100vw;
			margin-top: 28rpx;

			.itemBox {
				display: flex;

				.item {
					display: flex;
					align-items: center;
					flex-direction: column;
					margin-right: 22rpx;

					image {
						width: 172rpx;
						height: 208rpx;
						border-radius: 8rpx;
					}

					text {
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>
